/**
 * 切换图层
 */
const svgIcon = '<svg t="1677143736553" className="icon" viewBox="0 0 1024 1024" version="1.1"\n' +
    '                 xmlns="http://www.w3.org/2000/svg" p-id="2779" width="20" height="20">\n' +
    '    <path\n' +
    '        d="M856.55552 337.67424L525.5168 147.456a46.24384 46.24384 0 0 0-46.2848 0L145.44896 339.3536a35.38944 35.38944 0 0 0 0 61.44L479.232 592.6912a46.24384 46.24384 0 0 0 46.12096 0l331.07968-190.34112a37.31456 37.31456 0 0 0 0.12288-64.67584z m-616.0384 32.3584l253.46048-143.68768a17.16224 17.16224 0 0 1 16.95744 0l253.46048 143.64672-253.46048 143.64672a17.16224 17.16224 0 0 1-16.95744 0z"\n' +
    '        p-id="2780" fill="#ffffff"></path>\n' +
    '    <path\n' +
    '        d="M784.1792 495.98464l-273.2032 154.78784a17.16224 17.16224 0 0 1-16.9984 0l-309.98528-177.152a35.38944 35.38944 0 0 0-35.75808 0.36864l-4.096 2.4576a35.38944 35.38944 0 0 0 0.57344 60.98944l334.68416 192.512a46.24384 46.24384 0 0 0 46.12096 0l331.776-190.79168a37.31456 37.31456 0 0 0 0.6144-64.34816 37.31456 37.31456 0 0 0-38.37952 0z"\n' +
    '        p-id="2781" fill="#ffffff"></path>\n' +
    '    <path\n' +
    '        d="M784.1792 630.49728l-277.42208 157.20448a17.16224 17.16224 0 0 1-16.9984 0l-306.74944-175.3088a35.38944 35.38944 0 0 0-33.3824-0.94208 35.38944 35.38944 0 0 0-1.80224 62.30016L479.232 864.256a46.24384 46.24384 0 0 0 46.12096 0l331.776-190.79168a37.31456 37.31456 0 0 0 0.6144-64.34816 37.31456 37.31456 0 0 0-38.37952 0z"\n' +
    '        p-id="2782" fill="#ffffff"></path>\n' +
    '</svg>'

class SwitchStyle {
    map
    position
    static location = {
        'TOP_LEFT': 'mapbox-custom-switch-top-left',
        'TOP_RIGHT': 'mapbox-custom-switch-top-right',
        'BOTTOM_LEFT': 'mapbox-custom-switch-bottom-left',
        'BOTTOM_RIGHT': 'mapbox-custom-switch-bottom-right'
    }
    static styleLis = [
        {
            name: '影像地图',
            key: 'video',
            src: 'https://t7.baidu.com/it/u=3988344443,4282949406&fm=193&f=GIF',
            style: 'mapbox://styles/mapbox/satellite-streets-v12'
        }
    ]
    constructor(map, position = 'BOTTOM_RIGHT', defaultStyleOption) {
        this.map = map
        this.position = position
        this.onload(defaultStyleOption)
    }
    onload(defaultStyleOption) {
        this.map.on('load', () => {
            const { sprite, name } = this.map.getStyle()
            let opt = {
                style: sprite,
                name: '矢量地图',
                key: name,
                src: 'https://picnew10.photophoto.cn/20160609/lanseshijieditushiliangsucai-26196173_1.jpg'
            }
            Object.assign(opt, defaultStyleOption)
            SwitchStyle.styleLis.unshift(opt)
            this.initDom()
        })
    }
    initDom() {
        // 最外层的容器
        let container = document.createElement('div')

        // 列表dom
        let listDom = this.initListDom()
        // 获取父元素
        let parent = document.getElementsByClassName('mapboxgl-control-container')[0]
        // 默认图层
        let defaultDiv = document.createElement('div')
        defaultDiv.className = `mapbox-custom-switch-container ${SwitchStyle.location[this.position]}`
        let span = document.createElement('span')
        span.className = 'switch-default-span'
        span.innerText = SwitchStyle.styleLis[0].name
        let img = document.createElement('img')
        console.log(SwitchStyle.styleLis[0].src)
        img.src = SwitchStyle.styleLis[0].src
        img.className = 'switch-default-img'
        span.style.visibility = 'hidden'
        defaultDiv.append(img)
        defaultDiv.append(span)
        // 容器添加元素
        container.append(defaultDiv)
        container.append(listDom)
        // 全部添加到父元素中
        parent.append(container)

        // 调整 鼠标移入是的dom 和样式
        let layerContainerDiv = document.createElement('div')
        layerContainerDiv.className = 'switch-hover-span'

        let toolStyle = {
            'display': 'flex',
            flexDirection: 'row',
            gap: '0.3rem',
            alignItems: 'center',
            justifyContent: 'center',
            visibility: 'visible'
        }
        Object.assign(layerContainerDiv.style, {...toolStyle});

        let icon = document.createElement('div')
        icon.style.height = '20px'
        icon.innerHTML = svgIcon
        let iconSpan = document.createElement('span')
        iconSpan.innerText = '图层'
        layerContainerDiv.append(icon)
        layerContainerDiv.append(iconSpan)
        defaultDiv.append(layerContainerDiv)

        // 鼠标移入显示
        defaultDiv.addEventListener('mouseenter',(e) => {
            span.style.visibility = 'visible'
            layerContainerDiv.style.visibility = 'hidden'
            listDom.style.visibility = 'visible'
        })
        // 鼠标从容器移除
        container.addEventListener('mouseleave',(e) => {
            span.style.visibility = 'hidden'
            layerContainerDiv.style.visibility = 'visible'
            listDom.style.visibility = 'hidden'
        })
    }
    initListDom() {
        let list = document.createElement('div')
        list.className = `switch-list-container ${SwitchStyle.location[this.position]}`
        Object.assign(list.style, { marginRight: '5rem' })
        SwitchStyle.styleLis.forEach((item) => {
            let div = document.createElement('div')
            div.className = 'switch-list-item'
            let span = document.createElement('span')
            span.className = 'switch-list-item-span'
            span.innerText = item.name
            let img = document.createElement('img')
            img.className = 'switch-list-item-img'
            img.src = item.src
            div.append(img)
            div.append(span)
            div.addEventListener('click', (e) => {
                this.map.setStyle(item.style)
            })
            list.append(div)
        })



        return list
    }
}

export default SwitchStyle;
